<!-- 下拉菜单 全部- 价格-分类  -->
<template>
    <div class="dropdown">
        <!-- 下拉菜单 -->
        <van-dropdown-menu>
            <van-dropdown-item disabled title="全部商品" />
            <van-dropdown-item v-model="value2" :options="option2" title="价格排序" @change="changePrice" />
            <van-dropdown-item v-model="value3" :options="filterCategory" title="分类" @change="changeCategory" />
        </van-dropdown-menu>
        <!-- 数据展示 -->
        <ul>
            <li v-for="(item, index) in goodList" :key="index" @click="tiao(item.id)">
                <img v-lazy="item.list_pic_url" alt="" />
                <p>{{ item.name }}</p>
                <span>{{ item.retail_price | formatPrice }}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value2: 'desc',
            // value3: "a",
            option2: [
                { text: '价格由高到低', value: 'desc' },
                { text: '价格低到高', value: 'asc' },
            ],
        };
    },
    props: ['filterCategory', 'goodList'],
    computed: {
        value3: {
            get() {
                let val = '';
                this.filterCategory.forEach(item => {
                    if (item.checked) {
                        val = item.value;
                    }
                });
                return val;
            },
            set(m) {
                console.log(m);
            },
        },
    },
    created() {
        console.log(this.filterCategory);
        // 默认下拉菜单选中项
        // this.filterCategory.forEach((item) => {
        //   if (item.checked) {
        //     this.value3 = item.value;
        //   }
        // });
    },
    methods: {
        changePrice(value) {
            // 修改排序方式
            //console.log(value); // desc asc
            // 子传父 将 参数传给 searchPop 父组件
            this.$emit('changePrice', value);
        },
        changeCategory(value) {
            //修改类别方式
            //console.log(value);
            // 子传父 将 参数传给 searchPop 父组件
            this.$emit('changeCategory', value);

            
        },
        tiao(id) {
            console.log(id);
            this.$router.push('/pro?id=' + id);
        },
    },
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.dropdown {
    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li {
            width: 49%;
            img {
                width: 100%;
                display: block;
            }
            p {
                font-size: 16px;
            }
        }
    }
}
</style>
